<template>
	<!-- 商品推荐 -->
	<view class="RecommendGoods">
		<view style="overflow: hidden;" v-if="newList.length !== 0">
			<view class="list_s" v-for="(item,index) in newList" :key="index" @tap="jumpDetails(item)">
				<image :src="item.img" mode=""></image>
				<view class="goods_right">
					<p class="p1">{{item.title}}</p>
					<p class="p2"><text class="text2" :style="{color:newColor.color}">{{item.sales}}人购买</text></p>
					<p class="p3">
						<text class="text1" :style="{color:newColor.color}">¥{{item.price || 0}}</text>
						<text class="text2" v-if="item.disuse_price">¥{{item.disuse_price}}</text>
					</p>
				</view>
			</view>
		</view>
		<nodata v-else></nodata>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import nodata from '../../../components/nodata/nodata.vue'
export default {
	data() {
		return {
			active: true,
			newList:[]
		};
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		let that = this;
		that.pageIndex = 1;
		setTimeout(function() {
			that.getGood();
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom: function() {
		// pullScroll.success();
		console.log('上拉加载');
		let that = this;
		setTimeout(() => {
			that.pageIndex++;
			that.request('goods/getGoodsList', {
				is_recommend: 1,
				page: that.pageIndex,
				psize: 10
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					let newdata = res.data;
					that.newList = that.newList.concat(newdata);
				}
			});
		}, 1000);
	},
	onShow() {
		this.getGood()
		setTimeout(() => {
			this.active = false;
		}, 600);
	},
	methods: {
		jumpDetails(item) {
			this.$Router.push({ path: '/pagesA/pages/goods/goodsDetails',query:{
				goodid: item.id
			} });
		},
		getGood(){
			this.request('goods/getGoodsList',{
				is_recommend: 1,
				page: this.pageIndex,
				psize: 10
			}).then(res=>{
				console.log(res)
				this.newList = res.data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 256rpx;
	width: 100%;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	border-radius: 10upx;
	image {
		width: 250upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
	}
	.goods_right {
		position: relative;
		overflow: hidden;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 90upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(100, 100, 100, 1);
		}
	}
	.goumai {
		font-size: 24upx;
		width: 150upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		background: rgba(242, 58, 58, 1);
		border-radius: 28upx;
		color: #ffffff;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
	}
}
</style>
